<template>
  <div class="cartview">
    <van-nav-bar left-text=""  title="购物车" left-arrow @click-left="back()">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="box2" v-if="cart_list.length != 0">
      <van-swipe-cell v-for="(item, index) in cart_list" :key="index">
        <div class="content">
          <div class="left">
            <van-checkbox
              class="choose"
              v-model="item.isChecked"
              @change="backCheckAll"
            ></van-checkbox>
          </div>
          <div class="right">
            <van-card
              class="list"
              :price="item.originprice"
              :title="item.proname"
              :thumb="item.img1"
            >
              <template #footer>
                <div class="box1">
                  <div class="minus" @click="minus(item)">－</div>
                  <div class="num" :v-model="item.num">{{ item.num }}</div>
                  <div class="add" @click="add(item)">＋</div>
                </div>
              </template>
            </van-card>
          </div>
        </div>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            @click="del(index)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>

    <van-empty v-else description="购物车空空如也">
      <router-link to="kindofview"><van-button round type="danger" class="bottom-button" 
        >立即购物</van-button
      ></router-link>
    </van-empty>

    <!-- ---------------- -->

    <van-submit-bar
      :price="totalMoney()"
      :disabled="check_goods.length <= 0"
      @submit="onSubmit"
      
    >
      <template #button>
        <div class="buy" @click="gopay()">去结算<span>({{totalCount()}})</span></div>
      </template>
      <van-checkbox v-model="isCheckAll" @change="allCheckHandle"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>

import {fun_delcart} from '../api/index.js'
import {fun_lookcart} from '../api/index.js'
import Vue from "vue";
import { Empty } from "vant";
import { Button } from "vant";
import { Card } from "vant";
import { SubmitBar } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
import { SwipeCell } from "vant";

import { Dialog } from "vant";

Vue.use(Dialog);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(SubmitBar);
Vue.use(Card);
Vue.use(Empty);
Vue.use(Button);
export default {
  data() {
    return {
      isCheckAll: false,
      cartid:'',
      userid:localStorage.getItem('userid'),
      cart_list: [],
      check_goods: [], //已选择的商品
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onSubmit() {},
    del(item) {
      fun_delcart(this.cartid).then((res)=>{
        console.log(res);
        Dialog.confirm({
        message: "确认删除吗？",
      })
        .then(() => {
          this.check_goods.splice(this.check_goods.indexOf(item), 1);
          this.cart_list.splice(this.cart_list.indexOf(item), 1);
        })
        .catch(() => {
          return;
        });
      })
      
    },
    add(item) {
      item.num++;
    },
    minus(item) {
      if (item.num <= 1) {
        item.num = 1;
      } else {
        item.num--;
      }
    },
    allCheckHandle() {
      this.cart_list.forEach((item) => (item.isChecked = this.isCheckAll));
    },
    backCheckAll() {
      this.isCheckAll = this.cart_list.every((item) => item.isChecked);
    },
    totalCount() {
      return this.cart_list.reduce((sum, item) => {
        return sum + (item.isChecked ? item.num : 0);
      }, 0);
    },
    totalMoney() {
     
      return this.cart_list.reduce((sum, item) => {
        return sum +  parseInt((item.isChecked ? item.num * item.originprice : 0)+'00'+'.00')
      }, 0);
      
    },
    gopay(){
      this.$router.push({
        name:'payview',
        params:{
           promsg:this.cart_list 
        }
      })
    }
    
  },
  created(){
    fun_lookcart(this.userid).then((res)=>{
      this.cart_list=res.data.data
          console.log(this.cart_list);
          this.cartid=this.cart_list[0].cartid
          console.log(this.cartid);
    })  
    
  },
  
  
};
</script>

<style scoped>
.content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.left {
  width: 8%;
  padding: 2.5rem 0.5556rem;
}
.right {
  width: 92%;
}
.box1 {
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.add {
  color: #fff;
  border-radius: 50%;
  background-color: red;
  font-size: 0.7778rem;
  padding: 0 0.1389rem;
  
}
.minus {
  color: red;
  border-radius: 50%;
  background-color: #fff;
  font-size: 0.7778rem;
  padding: 0 0.1389rem;
  border: 0.0278rem solid red;
  margin-right: 1.1111rem;
  
}
.num {
  font-size: 0.7778rem;
  margin-right: 0.8333rem;
  margin-top: 0.1111rem;
  
}
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
.buy {
  text-align: center;
  line-height: 2.2222rem;
  background-color: red;
  color: #fff;
  width: 6.1111rem;
  height: 2.2222rem;
  border-radius: 1.3889rem;
}
</style>